<template>
  <div class="page app-container">
    <el-button type="primary" @click="router.push('/stencil/warranty/add')">新增商品质保模板</el-button>
    <div class="hint" v-if="isShowWarranty">
      <div>
        <el-icon> <WarningFilled /> </el-icon
        >商品质保模板不会自动与产品关联，您可以在发布，修改产品信息时选择关联已经创建的质保模板，也可以在创建模板后，批量关联在商品上。
      </div>
      <span @click="isShowWarranty = false">不再提醒</span>
    </div>
    <el-scrollbar max-height="calc(100vh - 300px)">
      <el-empty v-if="!data.length && !loading" />
      <div class="loading" v-if="loading && !data.length" v-loading="loading"></div>
      <template v-for="item in data" :key="item.warrantyId">
        <div class="fittings-item">
          <div class="fittings-item-info">
            <div class="title">
              <span>{{ item.warrantyName }}</span>
              <el-space>
                <el-button type="primary" link>使用中的商品({{ item.num || 0 }})</el-button>
                <el-button
                  type="primary"
                  link
                  @click="
                    router.push({
                      path: `/stencil/warranty/goodsList`,
                      query: { warrantyId: item.warrantyId, warrantyName: item.warrantyName }
                    })
                  "
                  >添加关联商品</el-button
                >
                <el-button type="primary" link @click="router.push(`/stencil/warranty/edit?warrantyId=${item.warrantyId}`)"
                  >编辑</el-button
                >
                <el-button type="primary" link @click="router.push(`/stencil/warranty/view?warrantyId=${item.warrantyId}`)"
                  >查看</el-button
                >
              </el-space>
            </div>
            <div class="info">
              <div>
                质保时限：<span>{{ Math.floor(item.warrantyTime / 12) }}年</span
                ><span v-if="item.warrantyTime % 12">{{ item.warrantyTime % 12 }}月</span>
              </div>
              <div>
                状态：<span>{{ listConfig.warrantyStatus[item.warrantyStatus] }}</span>
              </div>
              <div>
                质保开始日期：<span>{{ listConfig.warrantyBeginType[item.warrantyBeginType] }}</span>
              </div>
              <div>
                最后编辑时间：<span>{{ item.updateTime }}</span>
              </div>
            </div>
          </div>
          <div class="fittings-item-del">
            <el-icon @click="openDel(item)">
              <DeleteFilled />
            </el-icon>
          </div>
        </div>
        <div class="remark">
          <span v-if="item.remark">备注：{{ item.remark }}</span>
        </div>
      </template>
      <div class="pagination">
        <el-pagination
          v-model:current-page="params.page"
          v-model:page-size="params.size"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="init"
          @current-change="init"
        />
      </div>
    </el-scrollbar>
    <el-dialog v-model="delVisible" :width="directDel ? 400 : 500" center align-center :show-close="false">
      <template #title v-if="!directDel">
        <CustomTitle title="删除商品附加信息模板" />
      </template>
      <el-form label-position="top" :model="delParams" v-if="!directDel">
        <el-form-item label="该商品附加信息模板有关联商品信息，如果删除请修改模板设置">
          <el-radio-group v-model="delParams.type">
            <el-radio label="商家自设质保模板" :value="1"></el-radio>
            <el-radio label="没有质保" :value="2"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择商品附加信息模板" v-if="delParams.type == 1">
          <el-select placeholder="请选择" v-model="delParams.choiceWarrantyId" @change="checkTemp">
            <el-option
              v-for="item in allTemp.filter(v => v.warrantyId != delParams.warrantyIds[0])"
              :value="item.warrantyId"
              :key="item.warrantyId"
              :label="item.warrantyName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="sure" v-else>
        <div>
          <el-icon>
            <Warning />
          </el-icon>
        </div>
        <span>此模板将被删除，是否继续？</span>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="delVisible = false">取 消</el-button>
          <el-button type="primary" @click="delTemp">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import CustomTitle from "@/components/CustomTitle/index.vue";
import { getList, getAllTemplate, deleteTemplate } from "@/apis/mallConfig/warranty";
import { ElMessage, menuItemEmits } from "element-plus";
import { useLocalStorage } from "@vueuse/core";

const isShowWarranty = useLocalStorage("isShowWarranty", true);
const router = useRouter();
const delVisible = ref(false);
const data = ref([]);
const total = ref(0);
const delParams = ref({
  type: 2,
  choiceWarrantyId: "",
  warrantyIds: [],
  choiceWarrantyName: ""
});

const listConfig = {
  warrantyBeginType: ["订单合同支付后开始"],
  warrantyStatus: ["生效中"]
};
const params = ref({
  page: 1,
  size: 10
});
const directDel = ref(false);
const loading = ref(false);
const allTemp = ref([]);
/**
 * 打开删除弹窗
 */
const openDel = item => {
  directDel.value = !item.num;
  delParams.value.warrantyIds = [item.warrantyId];
  delParams.value.choiceWarrantyName = item.warrantyName;
  delVisible.value = true;
};
/**
 * 删除模板
 */
const delTemp = async () => {
  const res = await deleteTemplate({ ...delParams.value, type: directDel.value ? 2 : delParams.value.type });
  if (res.code == 200) {
    ElMessage.success("删除成功");
    delVisible.value = false;
    init();
  }
};
const init = async () => {
  const res = await getList(params.value);
  data.value = res.data.records;
  total.value = res.data.total;
  loading.value = false;
};
/**
 * 选择模板
 */
const checkTemp = () => {
  delParams.value.choiceWarrantyName = allTemp.value.filter(
    v => v.warrantyId == delParams.value.choiceWarrantyId
  )[0].warrantyName;
};
const getAllTemp = async () => {
  const res = await getAllTemplate({});
  allTemp.value = res.data;
};
onMounted(() => {
  loading.value = true;
  getAllTemp();
  init();
});
</script>

<style lang="scss" scoped>
@import "index";
</style>
